<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		  <div class="layui-form-item">
		    <label class="layui-form-label">视频名称</label>
		    <div class="layui-input-inline">
		      <input type="text" name="video_name" placeholder="请输入视频名称" autocomplete="off" class="layui-input">
		    </div>
			
			<label class="layui-form-label">视频类型</label>
			<div class="layui-input-inline">
			  <select class="type" name="type_id" lay-filter="aihao">
			    <option value="">请选择</option>
			  </select>
			</div>
			
			<label class="layui-form-label">状态</label>
			<div class="layui-input-inline">
			  <input type="text" name="state" placeholder="请输入状态" autocomplete="off" class="layui-input">
			</div>
			
		  </div>
		  
		  
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="search">立即提交</button>
		    </div>
		  </div>
		  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
		<script>
		layui.use(['form','table','jquery'], function(){
		  var form = layui.form;
		  var table = layui.table;
		  var $ = layui.jquery;
		  
		  //加载类别
		  $.post(
			"type/findAll.do",
			function(res){
				for(var i=0;i<res.length;i++){
					var str = "<option value='"+res[i].type_id+"'>"+res[i].type_name+"</option>";
					$(".type").append($(str));
					form.render();
				}
			},"json"
		  );
		  
		  //各种基于事件的操作，下面会有进一步介绍
		  form.on('submit(search)', function(data){
		    // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
		    // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
		    // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			table.reload('demo', {
			  where: data.field //设定异步数据接口的额外参数
			  //,height: 300
			});
		    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		  });
		});
		</script>

		
		
		<table id="demo" lay-filter="test"></table>
		 
		<script>
		layui.use(['table','form','jquery'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var $ = layui.jquery;
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 400
		    ,url: 'move/findAll.do',//数据接口
			limits:[5,10,15,20,25]
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'video_id', title: 'ID'}
		      ,{field: 'video_name', title: '视频名称'}
		      ,{field: '', title: '视频类型',templet:function(d){
				  return d.type.type_name;
			  }}
		      ,{field: 'play_url', title: '播放地址'} 
		      ,{field: 'state', title: '状态'}
		      ,{field: 'year', title: '年代'}
		      ,{field: 'introduce', title: '简介'}
			  ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
		  
		  //监听工具条 
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		   
		    if(layEvent === 'detail'){ //查看
		      //do somehing
		    } else if(layEvent === 'del'){ //删除
		      layer.confirm('真的删除行么', function(index){
		        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
		        layer.close(index);
		        //向服务端发送删除指令
		      });
		    } else if(layEvent === 'edit'){ //编辑
		      //do something
			  //数据回显
			  form.val("editForm",data);
			  layer.open({
				  title: ['编辑视频信息', 'font-size:18px;'],
				  area: ['550px', '600px'],
			    type: 1,
			    content: $('#editForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			  });
		      
		      //同步更新缓存对应的值
		      obj.update({
		        username: '123'
		        ,title: 'xxx'
		      });
		    } else if(layEvent === 'LAYTABLE_TIPS'){
		      layer.alert('Hi，头部工具栏扩展的右侧图标。');
		    }
		  });
		  
		});
		</script>

		
	</body>
</html>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  
 
</script>



<form id="editForm" lay-filter="editForm" class="layui-form" style="display: none;"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		 <input type="hidden" name="video_id" id="" value="" />
		  <div class="layui-form-item">
		    <label class="layui-form-label">视频名称</label>
		    <div class="layui-input-inline">
		      <input type="text" name="video_name" lay-verify="required" maxlength="20" placeholder="请输入视频名称" autocomplete="off" class="layui-input">
		    </div>
			</div>
			
			<div class="layui-form-item">
			<label class="layui-form-label">视频类型</label>
			<div class="layui-input-inline">
			  <select class="type" name="type_id" lay-filter="aihao" lay-verify="required">
			    <option value="">请选择</option>
			  </select>
			</div>
			</div>
			
			<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-inline">
			  <input type="text" name="state" placeholder="请输入状态" autocomplete="off" class="layui-input">
			</div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">年代</label>
		    <div class="layui-input-inline">
		      <input type="number" id="year" name="year" placeholder="请输入年代" maxlength="4" autocomplete="off" class="layui-input">
		    </div>
			</div>
		  
		  
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
		    </div>
		  </div>
		  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
		<script>
		layui.use(['form','table','jquery'], function(){
		  var form = layui.form;
		  var table = layui.table;
		  var $ = layui.jquery;
		  
		 
		  
		  //各种基于事件的操作，下面会有进一步介绍
		  form.on('submit(edit)', function(data){
		    // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
		    // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
		    // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			var val = $("#year").val();
			if(val.length != 4){
				alert("年代只能为4位数字")
				return false;
			}
			
			$.post(
				"move/edit.do",
				data.field,
				function(res){
					//表格重载
					table.reload('demo');
					//关闭弹出层
					layer.close(layer.index);
					layer.msg('修改成功');
				}
				
			);
		    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		  });
		});
		</script>